<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 文件管理</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-select/bootstrap-select.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <form class="form-inline" id="query_form" autocomplete ="off">
                    <div class="form-group">
                        <div class="form-group">
                            <label class="control-label">文件目录:  </label>
                            <select class="selectpicker" name="catalogueId" >
                                <option value="">请选择</option>
                                <option data-icon="fa fa-folder" th:each="catalogue,catalogueStat:${catalogueList}" th:value="${catalogue.catalogueId}" th:text="${catalogue.catalogueName}"></option>
                            </select>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" id="query_list"><span class="bold">查询</span></button>
                    <button type="button" class="btn btn-success" id="file_upload"><span class="bold">上传</span></button>
                </form>
            </div>

        </div>
    </div>
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>附件列表</h5>
            </div>
            <div class="ibox-content">
                <table class="table table-hover" id="bootstrap-table" th:data-url='@{/attachment/list.do}'
                       data-toggle="table"
                       data-pagination="true"
                       data-side-pagination="server"
                       data-query-params="queryParams"
                       data-query-params-type="no"
                       data-toolbar-align="left"
                       data-buttons-align="right"
                >
                    <thead>
                    <tr>
                        <th data-width="30%" data-field="attachmentName">文件名称</th>
                        <th data-width="10%" data-field="attachmentSize">文件大小</th>
                        <th data-width="10%" data-field="catalogueName">文件目录</th>
                        <th data-width="10%" data-field="realname">创建人</th>
                        <th data-width="13%" data-field="createTime">创建日期</th>
                        <th data-width="17%" data-align="center" data-field="attachmentId" data-formatter="operationFormatter">操作</th>
                    </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
</div>


<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.js}"></script>
<script th:src="@{/js/plugins/bootstrap-select/bootstrap-select.js}"></script>
<script th:src="@{/js/plugins/bootstrap-select/defaults-zh_CN.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>
<script th:inline="javascript">
    /**
     * 查询数据列表传参数
     * @param params
     * @returns {{current: (number|*), size: (number|*)}}
     */
    function queryParams(params) {
        var param = {};
        $('#query_form').find('[name]').each(function () {
            var value = $(this).val();
            if (value !== '') {
                param[$(this).attr('name')] = value;
            }
        });
        param['current'] = params.pageNumber;   //页面大小
        param['size'] = params.pageSize;   //页码
        param['descs'] = 'create_time';
        return param;
    }

    /**
     * 条件查询
     */
    $("#query_list").click(function () {
        $("#bootstrap-table").bootstrapTable('refresh',{query: {current: 1}});
    });

    /**
     * 初始化操作按钮
     * @param value
     * @param row
     * @param index
     */
    function operationFormatter(value, row, index) {
        var id = value;
        var result = "";
        var path = [[${ctx}]]+"/attachment/download.do?id="+id;
        result += "<a  class='btn btn-white btn-sm' href='"+path+"' title='查看'><i class=\"fa fa-download\"></i> 下载 </a>";
        result += "<a  class='btn btn-white btn-sm' onclick='deleteById("+id+")' title='查看'><i class=\"fa fa-remove\"></i> 删除 </a>";
        return result;
    }


    /**
     * 根据ID删除数据
     * @param id
     */
    function deleteById(id) {
        parent.layer.confirm("确认删除数据？", {btn: ['确定', '取消'], title: "提示"}, function () {
            $.ajax({
                type: "get",
                url: [[${ctx}]] + "/attachment/delete.do",
                data: {id: id},
                dataType: "json",
                success: function (data) {
                    if (data.result) {
                        parent.layer.msg('删除成功', {icon: 1});
                        $("#bootstrap-table").bootstrapTable('refresh');
                    } else {
                        parent.layer.msg('删除失败', {icon: 2});
                    }
                }
            });
        });
    }

    /**
     * 跳转附件上传页面
     */
    $('#file_upload').click(function () {
        top.layer.open({
            type: 2,
            title: '附件上传',
            shadeClose: true,
            shade: 0.6,
            offset: 'auto',
            area: ['65%', '60%'],
            content: [[${ctx}]] + "/attachment/toUpload.do",
            success: function (layero, index) {
                // 获取子页面的iframe
                // var body = parent.layer.getChildFrame('body', index);
                var iframe = top.window[layero.find('iframe')[0]['name']];
            },
            end: function () {
                $("#bootstrap-table").bootstrapTable('refresh');
            }
        });
    })

</script>
</body>
</html>
